<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<title>支付</title>
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/sale/bespeak/bespeak.css" />
		<link rel="stylesheet" href="../../../css/doctor/pay.css" />
		<link rel="stylesheet" href="../../../css/sale/pay/pay.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css"> 
		
	</style>
	<body>
		<div class="mui-content" id="pay" v-cloak>
		    <div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						待支付{{pendorderSize}}
					</a>
					<a class="mui-control-item" href="#item2mobile">
						已支付{{payorderSize}}
					</a>
				</div>
				<div class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div  class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section class="panel to-be-paid" v-for="(pendOrder,index) in pendPayList">
									<ul class="mui-table-view"> 
								        <li class="mui-table-view-cell mui-collapse">
								        	<a class="mui-navigate-right" href="#">
												<div class="dividingline">
													<div class="overflow">
														<i class="iconfont icon-icon1"></i>
														<span class="doctor-name">{{pendOrder.partnerHospitalUserName}}</span>
														<span class="right">{{pendOrder.partnerSaleName}}</span>
													</div>
													<p>{{pendOrder.barcode}} {{pendOrder.partnerHospitalName}}</p>
												</div>
											</a>
								            <div class="mui-collapse-content">
												<div class="border-1px dividingline" v-for="orders in pendOrder.orders">
													<div class="overflow patient" @tap="selectOne(orders.orderId,pendOrder,index)">
														<i class="iconfont icon-tubiaozhizuomoban left" 
													:class="{'icon-xuanzhong':orders.show}"></i>
														<span class="patientname">{{orders.patientName}}</span>
														<span class="submittime">{{orders.submitTime|replaceT}}</span>
														<span class="btn-detail right" @click="orderDetail(orders.orderId)">详情</span>
													</div>
													<!--<div class="server-code">检验服务码：{{orders.serviceCode}}</div>-->
													<div class="check-item">{{orders.projectName}}</div>
													<div class="overflow item-total">
														共<span>{{orders.projectSize}}</span>个检验项目  
														<span> ¥{{orders.amount}}</span>
														<!--<i class="iconfont icon-icon2 right" @tap="del(orders.orderId)"></i>-->
													</div>
												</div>
											</div>
								        </li>
								    </ul>
									<div class="pay-footer overflow">
										<div>
											<div class="num-title">订单数</div>
											<div class="num">{{pendOrder.orderSize}}</div>
										</div>
										<div>
											<div class="num-title">检验金额</div>
											<div class="num">{{pendOrder.amount}}	</div>
										</div>
										<!--<div>
											<div class="num-title">优惠金额</div>
											<div class="num">{{pendOrder.amount}}	</div>
										</div>-->
										<div>
											<div class="num-title">应付金额</div>
											<div class="num">{{pendOrder.settleAmount}}</div>
										</div>
										<div>
											<span class="btn-primary" :class="{'hidden':pendOrder.isPay}">确认支付</span>
											<span class="btn-primary" :class="{'hidden':!pendOrder.isPay}" @click="confirmPay(pendOrder.partnerHospitalId,pendOrder.partnerHospitalUserId,pendOrder.orders)">确认支付</span>
										</div>
									</div>
								</section>
								<div class="noData" v-show="!pendPayList.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section class="panel to-be-paid paid">
									<p>今日已向{{havePayDay.hospitalUserSize}}位医生收款，共{{havePayDay.orderSize}}个订单</p>
							    	<div class="countBox">
							    		<p><span>检验金额</span><span>{{havePayDay.marketPrice}}</span></p>
							    		<!--<p><span>优惠金额</span><span>{{havePayDay.settlePrice}}</span></p>-->
							    		<p><span>应收金额</span><span>{{havePayDay.settlePrice}}</span></p>
							    		<p><span>实收金额</span><span>{{havePayDay.actualPrice}}</span></p>
							    	</div>
								</section>
								<section class="panel to-be-paid paid"  v-for="havePay in havePayList">
									<div class="dividingline">
										<div class="overflow">
											<i class="iconfont icon-icon1"></i>
											<span class="doctor-name">{{havePay.partnerHospitalUserName}}</span>
											<span class="right">业务员 {{havePay.partnerSaleName}}</span>
										</div>
									</div>
									<div class="clinic-addr">{{havePay.barcode}} {{havePay.partnerHospitalName}}</div>
									<div class="pay-footer overflow" @tap="order(havePay.payId)">
										<div>
											<div class="num-title">订单数</div>
											<div class="num color-333">{{havePay.orderSize}}</div>
										</div>
										<div>
											<div class="num-title">检验金额</div>
											<div class="num color-333">{{havePay.amount}}</div>
										</div>
										<!--<div>
											<div class="num-title">优惠金额</div>
											<div class="num color-333">{{havePay.amount}}</div>
										</div>-->
										<div>
											<div class="num-title">实付金额</div>
											<div class="num color-333">{{havePay.settleAmount}}</div>
										</div>
										<div>
											<div class="num-title">收入金额</div>
											<div class="num color-333">{{havePay.settleAmount}}</div>
										</div>
										<i class="iconfont icon-chakangengduo"></i>
									</div>
									<div class="overflow pay-way">
										<span class="left">{{havePay.payTime}}</span>
										<span class="right">{{havePay.payUser+''|formatPayUser}}付款  {{havePay.payType+''|formatPayType}}</span>
									</div>
								</section>
								<div class="noData" v-show="!havePayList.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="cover" :class="{'show':isShow}"></div>
				<div class="codeModel" :class="{'show':isShow}">
					<span @click="closeModel"><i class="iconfont icon-shanchu"></i></span>
					<span><img :src="srcUrl"/></span>
				</div>
			</div>
		</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/cmms.js?time=333"></script>
		<script>
			new Vue({
				el:"#pay",
				data:{
					isShow:false,
					pendPayList:[],//待支付
					havePayList:[],//已支付
					havePayDay:[],
					srcUrl:'',
					pendorderSize:'',
					inorderSize:'',
					payorderSize:'',
					gallery:'',//slider父元素
					errMsg:'',
					isPay:true
				},
				mounted(){
//					this.gallery = mui('.mui-slider');
					this.muiInit();
					this.pendingPayOrder();
					
				},
				methods:{
					muiInit(){
						mui.init({
							swipeBack: false
						});
						mui('.mui-scroll-wrapper').scroll({
							indicators: true //是否显示滚动条
						});
						let _this = this;
						_this.localUrl = location.href.split('#')[0];
						/*微信支付接口配置*/
						AT.muiAjax('/partner-sale/partnerSale/wxConfig','post',{
								url:_this.localUrl 
							},
							function(res){
//								console.log(res);
								wx.config({
									appId:res.appId,
									timestamp:res.timestamp,
									nonceStr:res.nonceStr,
									signature:res.signature,
									jsApiList:['chooseWXPay']
								});
						});
					},
					/*加载列表信息*/
					pendingPayOrder(){
						let _this = this;
						
						/*待支付*/
						AT.muiAjax('/partner-sale/partnerSale/pendingPaymentOrder','post',
						{},
						function(res){
							console.log(res);
//							_this.pendPayList=res;
							let arrs = res;
							let orders = [];
							for(let i=0;i<arrs.length;i++){
								arrs[i].isPay = true;
								for(let order of arrs[i].orders){
									order.show = true;
								}
							}
							
							_this.pendPayList=arrs;
							_this.pendorderSize = res.length?'('+res.length+')':'';
							
							/*已支付*/
							AT.muiAjax('/partner-sale/partnerSale/havePaymentOrder','post',{						
							},
							function(realData){
	//							console.log(realData);
								_this.havePayList=realData;
								_this.payorderSize = realData.length?'('+realData.length+')':'';
							});
							
							/*业务员今日已完成*/
							AT.muiAjax('/partner-sale/partnerSale/todayHavePaidOrder','post',{						
							},
							function(realData1){
	//							console.log(res);
								_this.havePayDay = realData1;
							});
						});
					},
					selectOne(id,pendOrder,index){
						let _this =this;
						let amountSum = 0;
						let settleAmountSum = 0;
						let orderSizeSum=0;
							for(let order of pendOrder.orders){
								if(order.orderId==id){
									if(order.show==true){
										order.show = false;
									}else{
										order.show = true;
									}
								}
								if(order.show){
									orderSizeSum++;
									amountSum +=order.amount*100;
									settleAmountSum +=order.settleAmount*100;
								}
								if(orderSizeSum>0){
									pendOrder.isPay = true;
								}else{
									pendOrder.isPay = false;
								}
							}
							
							pendOrder.amount = amountSum/100;
							pendOrder.settleAmount = settleAmountSum/100;
							pendOrder.orderSize = orderSizeSum;
							_this.pendPayList[index]=pendOrder;
					},
					/*订单列表*/
					order(payId){
						console.log(payId);
						location.href = './order.html?id='+payId;
					},
					/*订单详情*/
					orderDetail(orderId){
						location.href = '../orderDetail.html?id='+orderId;
					},
					/*确认支付*/
					confirmPay(partnerHospitalId,partnerHospitalUserId,orders){
						let _this = this;
						
						let orderIds=[];
						for(let order of orders){
							if(order.show){
								orderIds.push(order.partnerOrderId);
							}
						}
						_this.isPay = false;
						AT.muiAjax('/partner-sale/partnerSale/initWeChatPaymentJSAPI','post',{						
							orderIds: orderIds,
							partnerHospitalId: partnerHospitalId ,
							partnerHospitalUserId:partnerHospitalUserId
						},
						function(res){
							wx.chooseWXPay({
						        timestamp:res.timeStamp,         //时间戳，自1970年以来的秒数     
						        nonceStr:res.nonceStr, //随机串     
						        package:res.packageValue,     
						        signType:res.signType,
						        paySign:res.paySign,
						        complete:function(aa){
						        	console.log(aa);
						        	//延迟20秒等待微信回调函数
						        	location.reload();
						        }
						    });
						});
					},
					/*关闭二维码框*/
					closeModel(){
						this.isShow = false;
						location.reload();
					},
					del(id){
						console.log(id)
						let _this = this;
						mui.confirm("确定要取消这条订单么？",'取消订单',['再考虑一下','取消订单'],function(con){
							if(con.index===1){
								AT.muiAjax('/partner-sale/order/delOrderStateById','post',{id:id},function(res){
									mui.toast(res);
//									_this.pendingPayOrder();
									location.reload();
								})
							}
						})
					}
				}
			})
		</script>
	</body>
</html>

